<html>
    <head>
        <title>Golang Chat</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script type="text/javascript">

            Date.prototype.format = function(fmt) {
                var o = {
                    "M+" : this.getMonth()+1,                 //月份
                    "d+" : this.getDate(),                    //日
                    "h+" : this.getHours(),                   //小时
                    "m+" : this.getMinutes(),                 //分
                    "s+" : this.getSeconds(),                 //秒
                    "q+" : Math.floor((this.getMonth()+3)/3), //季度
                    "S"  : this.getMilliseconds()             //毫秒
                };
                if(/(y+)/.test(fmt)) {
                    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                }
                for(var k in o) {
                    if(new RegExp("("+ k +")").test(fmt)){
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                    }
                }
                return fmt;
            }


            $(function() {

                var conn;
                var msg = $("#msg");
                var log = $("#log");

                function appendLog(msg) {
                    var d = log[0]
                    var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
                    msg.appendTo(log)
                    if (doScroll) {
                        d.scrollTop = d.scrollHeight - d.clientHeight;
                    }
                }

                $("#form").submit(function() {
                    if (!conn) {
                        return false;
                    }
                    if (!msg.val()) {
                        return false;
                    }
                    conn.send(new Date().format("yyyy-MM-dd hh:mm:ss") +msg.val());
                    msg.val("");
                    return false
                });

                if (window["WebSocket"]) {
                    conn = new WebSocket("ws://localhost:8088/ws");
                    conn.onclose = function(evt) {
                        var div = "<div><b>"+  new Date().format("yyyy-MM-dd hh:mm:ss") +"----Connection Closed.</b></div>";
                        appendLog($(div))
                    }
                    conn.onmessage = function(evt) {
                        appendLog($("<div/>").text(evt.data))
                    }
                    conn.onopen = function (evt) {
                        console.info(evt)
                    }
                } else {
                    appendLog($("<div><b>WebSockets Not Support.</b></div>"))
                }
            });
        </script>
        <style type="text/css">
            html {
                overflow: hidden;
            }

            body {
                overflow: hidden;
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                background: gray;
            }

            #log {
                background: white;
                margin: 0;
                padding: 0.5em 0.5em 0.5em 0.5em;
                position: absolute;
                top: 0.5em;
                left: 0.5em;
                right: 0.5em;
                bottom: 3em;
                overflow: auto;
            }

            #form {
                padding: 0 0.5em 0 0.5em;
                margin: 0;
                position: absolute;
                bottom: 1em;
                left: 0px;
                width: 100%;
                overflow: hidden;
            }

        </style>
    </head>
    <body>
        <div id="log"></div>
        <form id="form">
            <input type="submit" value="发送" />
            <input type="text" id="msg" size="64"/>
        </form>
    </body>
</html>